// 添加和修改模态框
const myaddModal = new bootstrap.Modal('#addModal')
const myeditModal = new bootstrap.Modal('#editModal')

// 获取省市区三级联动数据
editProvince()
// 省
async function editProvince() {
  const { data: provinceData } = await request.get('api/province')
  const pHtml = provinceData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#editForm [name=province]').html(
    `<option value="">--省份--</option>${pHtml}`
  )
}
// 改变省数据时获取市的数据
$('#editForm [name=province]').change(async function () {
  // 获取选中的省份
  const pname = $(this).val()
  // 调接口
  const { data: cityData } = await request.get('api/city', {
    params: { pname },
  })
  const cHtml = cityData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#editForm [name=city]').html(`<option value="">--城市--</option>${cHtml}`)
  // 将区的数据清空
  $('#editForm [name=area]').html('<option value="">--地区--</option>')
})

// 改变市数据时获取区
$('#editForm [name=city]').change(async function () {
  // 获取选中的省份
  const pname = $('#editForm [name=province]').val()
  // 获取市的数据
  const cname = $(this).val()

  // 调接口
  const { data: areaData } = await request.get('api/area', {
    params: { pname, cname },
  })
  const aHtml = areaData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#editForm [name=area]').html(`<option value="">--地区--</option>${aHtml}`)
})

// 学生列表
renderList()
async function renderList() {
  const { data } = await request.get('students')
  const listHtml = data
    .map(
      (item) =>
        `<tr>
     <td>${item.name}</td>
     <td>${item.age}</td>
     <td>${item.gender === 1 ? '女' : '男'}</td>
     <td>第${item.group}组</td>
     <td>${item.hope_salary}</td>
     <td>${item.salary}</td>
     <td>${item.province + ' ' + item.city + ' ' + item.area}</td>
     <td>
       <a data-id="${
         item.id
       }" href="javascript:;" class="edit text-success mr-3"><i class="bi bi-pen"></i></a>
       <a data-id="${
         item.id
       }" href="javascript:;" class="del text-danger"><i class="bi bi-trash"></i></a>
     </td>
   </tr>`
    )
    .join('')
  // 追加到dom中
  $('.list').html(listHtml)
  // 更改学生数量
  $('.total').html(data.length)
  // 学生删除
  $('.del').click(async function () {
    if (!window.confirm('你确定要删除数据吗')) return
    // 获取要删除的学生id
    const id = $(this).data('id') - 0
    try {
      // 调api接口进行删除
      await request.delete(`students/${id}`)
      info({ message: '删除成功' })
      // 重新渲染列表
      renderList()
    } catch (err) {
      info({ message: err.response.data.message, type: 'error' })
    }
  })
  // 点击修改按钮，弹出要修改的数据的对话框
  $('.edit').click(async function () {
    // 回显要修改的这条数据到修改表单中
    const id = $(this).data('id')
    // 调接口获取id对应的数据
    const { data: student } = await request(`students/${id}`)
    $('#editForm [name=name]').val(student.name)
    $('#editForm [name=age]').val(student.age)
    //  处理性别
    $('#editForm [name=gender]').each(function (index, item) {
      if (item.value === student.gender + '') {
        item.checked = true
      }
    })
    // 赋隐藏域的值
    $('#editForm [name=id]').val(student.id)
    $('#editForm [name=hope_salary]').val(student.hope_salary)
    $('#editForm [name=salary]').val(student.salary)
    $('#editForm [name=group]').val(student.group)
    $('#editForm [name=province]').val(student.province)
    // 主动发请求，获取城市和地区的数据
    // 城市数据
    const { data: cityData } = await request.get('api/city', {
      params: { pname: student.province },
    })
    const cHtml = cityData
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    $('#editForm [name=city]').html(
      `<option value="">--城市--</option>${cHtml}`
    )
    // 默认选中的城市
    $('#editForm [name=city]').val(student.city)

    // 区数据
    const { data: areaData } = await request.get('api/area', {
      params: { pname: student.province, cname: student.city },
    })
    const aHtml = areaData
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    $('#editForm [name=area]').html(
      `<option value="">--地区--</option>${aHtml}`
    )
    // 默认选中的地区
    $('#editForm [name=area]').val(student.area)

    // 打开修改的模态框
    myeditModal.show()
    // 监听模态框关闭事件
    $('#editModal')[0].addEventListener('hidden.bs.modal', (event) => {
      // console.log('我关闭了')
      // 清空表单选项
      $('#editForm')[0].reset()
    })
  })
}

// 收集修改表单数据，并进行修改
$('#editSubmit').click(async function () {
  // 获取表单数据
  const addData = serialize($('#editForm')[0], { hash: true })
  const name = addData.name || ''
  const age = addData.age - 0 || ''
  const gender = addData.gender - 0
  const province = addData.province || ''
  const city = addData.city || ''
  const area = addData.area || ''
  const hope_salary = addData.hope_salary - 0 || ''
  const salary = addData.salary - 0 || ''
  const group = addData.group - 0 || ''
  const id = addData.id - 0
  // 数据校验
  if (!/^[\u4e00-\u9fa5]{1,5}$/.test(name)) {
    return info({ type: 'error', message: '学生姓名不能为空且必须是1-4个中文' })
  }

  if (!/^(1[5-9])|(2\d)|(3[0-5])$/.test(age)) {
    return info({ type: 'error', message: '学生年龄必填且在15-35之间' })
  }
  if (!/^[1-8]$/.test(group)) {
    return info({ type: 'error', message: '组号只能是1-8之间的数字' })
  }
  if (province.length === 0) {
    return info({ type: 'error', message: '省份必填' })
  }
  if (city.length === 0) {
    return info({ type: 'error', message: '城市必填' })
  }
  if (area.length === 0) {
    return info({ type: 'error', message: '地区必填' })
  }
  if (!/^[1-9]\d+$/.test(hope_salary)) {
    return info({ type: 'error', message: '期望薪资必填且是正整数' })
  }
  if (!/^[1-9]\d+$/.test(salary)) {
    return info({ type: 'error', message: '实际薪资必填且是正整数' })
  }
  // 数据全部验证通过
  try {
    await request.put(`students/${id}`, {
      name,
      age,
      gender,
      group,
      province,
      city,
      area,
      hope_salary,
      salary,
    })
    info({ message: '修改成功' })
    // 关闭模态框
    myeditModal.hide()
    // 重新渲染
    renderList()
  } catch (err) {
    info({ type: 'error', message: err.response.data.message })
  }
})

// 获取添加时省市区三级联动数据
addProvince()
// 省
async function addProvince() {
  const { data: provinceData } = await request.get('api/province')
  const pHtml = provinceData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#addForm [name=province]').html(
    `<option value="">--省份--</option>${pHtml}`
  )
}

// 改变省数据时获取市的数据
$('#addForm [name=province]').change(async function () {
  // 获取选中的省份
  const pname = $(this).val()
  // 调接口
  const { data: cityData } = await request.get('api/city', {
    params: { pname },
  })
  const cHtml = cityData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#addForm [name=city]').html(`<option value="">--城市--</option>${cHtml}`)
  // 将区的数据清空
  $('#addForm [name=area]').html('<option value="">--地区--</option>')
})

// 改变市数据时获取区
$('#addForm [name=city]').change(async function () {
  // 获取选中的省份
  const pname = $('#addForm [name=province]').val()
  // 获取市的数据
  const cname = $(this).val()

  // 调接口
  const { data: areaData } = await request.get('api/area', {
    params: { pname, cname },
  })
  const aHtml = areaData
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  $('#addForm [name=area]').html(`<option value="">--地区--</option>${aHtml}`)
})

// 学生添加
// 1.点击+按钮，弹出添加的模态框
$('#openModal').click(function () {
  // 打开模态框
  myaddModal.show()
  // 监听模态框关闭事件
  $('#addModal')[0].addEventListener('hidden.bs.modal', (event) => {
    // console.log('我关闭了')
    // 清空表单选项
    $('#addForm')[0].reset()
  })
})
// 2.收集表单数据，并进行添加
$('#addSubmit').click(async function () {
  // 获取表单数据
  const addData = serialize($('#addForm')[0], { hash: true })
  const name = addData.name || ''
  const age = addData.age - 0 || ''
  const gender = addData.gender - 0
  const province = addData.province || ''
  const city = addData.city || ''
  const area = addData.area || ''
  const hope_salary = addData.hope_salary - 0 || ''
  const salary = addData.salary - 0 || ''
  const group = addData.group - 0 || ''
  // 数据校验
  if (!/^[\u4e00-\u9fa5]{1,5}$/.test(name)) {
    return info({ type: 'error', message: '学生姓名不能为空且必须是1-4个中文' })
  }

  if (!/^(1[5-9])|(2\d)|(3[0-5])$/.test(age)) {
    return info({ type: 'error', message: '学生年龄必填且在15-35之间' })
  }
  if (!/^[1-8]$/.test(group)) {
    return info({ type: 'error', message: '组号只能是1-8之间的数字' })
  }
  if (province.length === 0) {
    return info({ type: 'error', message: '省份必填' })
  }
  if (city.length === 0) {
    return info({ type: 'error', message: '城市必填' })
  }
  if (area.length === 0) {
    return info({ type: 'error', message: '地区必填' })
  }
  if (!/^[1-9]\d+$/.test(hope_salary)) {
    return info({ type: 'error', message: '期望薪资必填且是正整数' })
  }
  if (!/^[1-9]\d+$/.test(salary)) {
    return info({ type: 'error', message: '实际薪资必填且是正整数' })
  }
  // 数据全部验证通过
  try {
    await request.post('students', {
      name,
      age,
      gender,
      group,
      province,
      city,
      area,
      hope_salary,
      salary,
    })
    info({ message: '添加成功' })
    // 关闭模态框
    myaddModal.hide()
    // 重新渲染
    renderList()
  } catch (err) {
    info({ type: 'error', message: err.response.data.message })
  }
})
